CSS Setup

fValidate uses CSS for many of the built-in error modes. Here's the setup you need to follow.

First of all, when an error is found, depending on what error mode you have chosen, fValidate will add the CSS class name defined in the config to the element and/or its label. Since the same CSS class name is used for all the elements involved, you will need to setup element-specific classes. Here is the definitions that this website uses:

input.errHilite, select.errHilite, textarea.errHilite {
	border: 1px solid #DDC;
	background-color: #FFE;
	}
label.errHilite {
	color: #C00;
	}

Pretty simple, eh? By default, when applying CSS class names to elements, fValidate appends the error class name to the existing class name (all 4+ browser support multiple class names). So, you need to be mindful of this when making your classes, and include the !important declaration when necessary. You can tell fValidate to use only single class names (current it replaced by error class) in the config.

Now, the other place fValidate uses CSS in the error notification process is with any error mode that uses the box error-type. This uses an ID selector to receive its style. Again, here's the CSS this website uses for the box error type:

ul#errors {
	display: none;
	margin-top: 1em;
	background-color: #FFE;
	border: 1px solid #CC9;
	padding: .3em;
	color: #C00;
	font-weight: bold;
	}	
ul#errors li {
	margin-top: .5em;
	margin-bottom: .5em;
	padding: 0;
	}
ul#errors li.heading {
	list-style-type: none;
	color: #000;
	font-weight: normal;
	font-style: italic;
	margin: .5em 0;
	padding: 0;
	}

That's it!